<template>
  <div>
    <div class="swiperbox">
      <swiper
        :slidesPerView="1"
        :spaceBetween="30"
        :loop="true"
        :centeredSlides="true"
        :pagination="{
          clickable: true
          // dynamicBullets: true
        }"
        :autoplay="{
          delay: 2500,
          disableOnInteraction: false
        }"
        :navigation="true"
        :modules="modules"
        class="mySwiper"
      >
        <swiper-slide><img class="imgs" src="@/assets/img/flower.webp" alt="" /></swiper-slide>
        <swiper-slide><img class="imgs" src="@/assets/img/header.jpg" alt="" /></swiper-slide>
        <swiper-slide><img class="imgs" src="@/assets/img/not-found.gif" alt="" /></swiper-slide>
        <swiper-slide><img class="imgs" src="@/assets/img/newBg.jpg" alt="" /></swiper-slide>
      </swiper>
    </div>

    <vue3-seamless-scroll :list="list" class="scroll" :step="0.8" :hover="true" :direction="direction">
      <div class="item" v-for="(item, index) in list" :key="index" :data-index="index">
        <span>{{ item.title }}</span>
        <span>{{ item.date }}</span>
      </div>
    </vue3-seamless-scroll>
  </div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import { Vue3SeamlessScroll } from 'vue3-seamless-scroll'
import { Swiper, SwiperSlide } from 'swiper/vue' // swiper所需组件
// 这是分页器和对应方法，swiper好像在6的时候就已经分离了分页器和一些其他工具
import { Autoplay, Navigation, Pagination, A11y } from 'swiper'
// 引入swiper样式，对应css 如果使用less或者css只需要把scss改为对应的即可
import 'swiper/css'
import 'swiper/css/navigation'
import 'swiper/css/pagination'

// setup语法糖只需要这样创建一个变量就可以正常使用分页器和对应功能，如果没有这个数组则无法使用对应功能
const modules = [Autoplay, Pagination, Navigation, A11y]

type IDirectionType = 'left' | 'right' | 'up' | 'down'

let direction = ref<IDirectionType>('left')
const list = [
  {
    title: '无缝滚动第一行无缝滚动第一行',
    date: '2017-12-16'
  },
  {
    title: '无缝滚动第二行无缝滚动第二行',
    date: '2017-12-16'
  },
  {
    title: '无缝滚动第三行无缝滚动第三行',
    date: '2017-12-16'
  },
  {
    title: '无缝滚动第四行无缝滚动第四行',
    date: '2017-12-16'
  },
  {
    title: '无缝滚动第五行无缝滚动第五行',
    date: '2017-12-16'
  },
  {
    title: '无缝滚动第六行无缝滚动第六行',
    date: '2017-12-16'
  },
  {
    title: '无缝滚动第七行无缝滚动第七行',
    date: '2017-12-16'
  },
  {
    title: '无缝滚动第八行无缝滚动第八行',
    date: '2017-12-16'
  },
  {
    title: '无缝滚动第九行无缝滚动第九行',
    date: '2017-12-16'
  }
]

const arr = [
  {
    name: 1,
    id: 2
  },
  {
    name: 2,
    id: 2
  },
  {
    name: 3,
    id: 2
  },
  {
    name: 4,
    id: 2
  }
]

const click = (e: Event) => {
  console.log(e)
}
</script>
<style lang="scss" scoped>
.swiper {
  width: 70%;
  height: 500px;
}
.swiper-slide {
  width: 100% !important;
  height: 500px !important;
}
.imgs {
  width: 100%;
  height: 100%;
}
.test {
  height: 50px;
  margin: 10px;
  background-color: red;
}
.scroll {
  height: 200px;
  width: 500px;
  margin: 100px auto;
  overflow: hidden;
  padding: 20px;
  cursor: pointer;
  background: #fff;
}
.item {
  height: 100%;
  width: 100%;
}
.scroll .item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 3px 0;
}
</style>
